<template>
      <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count"><strong>{{$store.getters['todos/getList']}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a   :class="{selected:isSel==='all'}" href="#/"  @click="changStatus('all')">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:isSel==='no'}" @click="changStatus('no')">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:isSel==='no'}" @click="changStatus('yes')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" >清除已完成</button>
    </footer>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'SrcTodosMyFooter',

  data() {
    return {
      isSel:"all",
    };
  },
  computed:{
...mapState("todos",["list"]),
// ...mapGetters("todos",["cleanList"])
  

  },


  mounted() {
    
  },

  methods: {
    changStatus(val){
      this.isSel=val;
      this.$emit("change",val)
    },
    
  },
};
</script>
